<template>
  <div class="newHouse">
    <CommonHeader :propdatas="0"></CommonHeader>
    <CommonSearch @click="Lookingroom"></CommonSearch>

<!--    &lt;!&ndash; 新房内容 &ndash;&gt;-->
<!--    <div class='newHousePurse'>-->
<!--      <div class='location'>当前位置：房品优选首页>新房>建德天骄香槟郡</div>-->
<!--      <Carousel :imgSrc="imgSrc" :imagesList="imagesList" />-->
<!--    </div>-->
    <div id="backtop" class="top" @click="backtop"
         v-show="gotop"><img src="../assets/images/toppp.png" alt="" style="width: 45px;height: 45px;"></div>
    <div class="naver">
     <div v-for="(item,index) in list" :key="index" class="naverbox">
           <div class="navleft">
            <p class="tit">{{item.tit}}</p>
            <p class="tit2">{{item.tit2}}</p>
            <p class="tit2">{{item.tit3}}</p>
           </div>
          <div class="navright">
            <img :src="item.imgs" alt="" class="rightpng">
          </div>
        </div>
    </div>
     <div class="modelone">
       <div class="modelonetit">
         <span>楼盘精选</span>
         <span class="txtwo" @click="Lookingroom">更多楼盘</span>
       </div>
       <div class="modelones">
         <div v-for="(item,index) in houselist" :key="index" class="house" @click="Seedetails(item)">
            <img :src="item.imageCover" alt="" class="houseimg">
           <div class="mask"></div>
              <div class="onetit">{{ item.name }}</div>
              <div class="twotit">
                <span v-for="(item,index) in item.houseLabelList" :key="index">{{item.labelContent}}</span>
              </div>
            <div class="bottom">
              <div class="bottom_left">
                <span>余杭</span>
                <span style="margin-left: 3px">建面：{{ item.houseArea }}</span>
              </div>
              <div class="bottom_right">
                最高补贴：{{ item.subsidyStart }}元/套
              </div>
            </div>
         </div>
       </div>
     </div>
    <div class="modeltwo">
      <div class="modelonetit">
        <span>微首付特价盘</span>
<!--        <span class="txtwo">更多楼盘</span>-->
      </div>
      <div class="modelones">
        <div v-for="(item,index) in SpecialOffer" :key="index" class="house" @click="Seedetails(item)">
          <img :src="item.imageCover" alt="" class="houseimg">
          <div class="onetit">{{ item.name }}</div>
          <div class="twotit">{{ item.address }}</div>
          <div class="bottom">
            <div class="bottom_left">
              <span>建面：{{ item.houseArea }}m²</span>
            </div>
            <div class="bottom_right">
              最高补贴：
              <span class="num">{{ item.subsidyStart }}</span>
              元/套
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modelthree">
      <div class="modelonetit">
        <span>合伙人故事</span>
        <span class="txtwo" @click="joinusbtn">加入我们</span>
      </div>
      <div class="modelones">
        <div v-for="(item,index) in houselist2" :key="index" class="house">
          <div class="left">
            <img :src="item.image" alt="" class="houseimg">
          </div>
          <div class="right">
            <div class="onetit">{{ item.name }}</div>
            <div class="twotit">{{ item.story }}</div>
            <div class="twotit2">
              <span>身份：{{ item.identity }}</span>
              <span>{{ item.joinTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <CommonBottom></CommonBottom>
  </div>
</template>

<script>
import {updateFrontUser} from "@/api/vip";
import CommonHeader from '../components/commonHeader'
import CommonSearch from '../components/commonSearch'
import CommonBottom from "@/components/commonBottom";

// import Carousel from '@/components/swiper/Carousel';

export default {

  name: 'newHouse',
  components:{
    CommonBottom,
    CommonHeader,
    CommonSearch,
    // Carousel
  },
  data(){
    return{
      gotop:false,
      kindList:[
        {name:"首页",value:0},
        {name:"楼盘查询",value:1},
        {name:"加入我们",value:2},
        {name:"下载APP",value:3},
      ],
      list:[{
        tit:'专业品质买房顾问',
        tit2:'1v1高品质服务',
        tit3:'帮你买新房',
        imgs:require('../assets/images/lin1.png')
      },{
        tit:'免费专车看房',
        tit2:'精准优质服务',
        tit3:'免费专车，好房舒心看',
        imgs:require('../assets/images/lin2.png')
      },{
        tit:'专属购房补贴',
        tit2:'真实房源，购房领补贴',
        tit3:'低价保障，放心无忧',
        imgs:require('../assets/images/lin3.png')
      },{
        tit:'多种购房保障',
        tit2:'真实房源，真诚守信',
        tit3:'价格透明公开',
        imgs:require('../assets/images/lin4.png')
      }],
      houselist:[],
      houselist2:[],
      SpecialOffer:[],
    }
  },

  methods:{
    Lookingroom(){
      this.$router.push({
        path: '/Home'
      })
    },
    joinusbtn(){
      this.$router.push({
        path: '/jointeam'
      })
    },
    Seedetails(item){
      console.log(item.id,'参数')
      localStorage.setItem('houseId',item.id);
      this.$router.push({
        name: 'detail',
        // params:{
        //   houseId:item.id,
        // }
      })
    },
    //监听回到顶部按钮距浏览器顶部的距离，滚动的距离如果大于浏览器高度时，设置 toTop 为true,否则就是false
    scrolltotop() {
      let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
      if (scrollTop > 500) {
        this.gotop = true;
      } else {
        this.gotop = false;
      }
    },
    //回到顶部 点击回到顶部按钮，让距离逐渐减少，形成上划的效果
    backtop() {
      let back = setInterval(() => {
        if (
            document.body.scrollTop ||
            document.documentElement.scrollTop
        ) {
          document.body.scrollTop -= 100;
          document.documentElement.scrollTop -= 100;
        } else {
          clearInterval(back);
        }
      });
    },
    getall(){
        const time =this.time();
        let params = {
          action:'website.getInfoOfHomeBottom',
          timestamp: time,
          signature: this.clos_encryptDes("website.getInfoOfHomeBottom", time),
          accessKeyId: "APId1482c4fc9",
          deviceId:'1',
          type:1//1是特价盘否则就是楼盘精选
        }
        updateFrontUser(params).then(
            (res) => {
              if (res.data.statusCode == 201 && res.data.success == true) {
              this.SpecialOffer=res.data.data.rs
              }else{
                this.loading = false;
              }
            }).catch((error) => {
          console.log(error,'99');
        });
    },
    getall2(){
      const time =this.time();
      let params = {
        action:'website.getInfoOfHomeBottom',
        timestamp: time,
        signature: this.clos_encryptDes("website.getInfoOfHomeBottom", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        type:2,//1是特价盘否则就是楼盘精选
        pageNum:1,
        pageSize:4,
        cityId:localStorage.getItem('cityId')
      }
      updateFrontUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              this.houselist=res.data.data.rs
            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'99');
      });
    },
    //合伙人故事
    getall3(){
      const time =this.time();
      let params = {
        action:'website.getPartnerStory',
        timestamp: time,
        signature: this.clos_encryptDes("website.getPartnerStory", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
      }
      updateFrontUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              this.houselist2=res.data.data
            }else{
              this.loading = false;
            }
          }).catch((error) => {
        console.log(error,'99');
      });
    },
  },
  mounted() {
    this.getall()
    this.getall2()
    this.getall3()
    window.addEventListener("scroll", this.scrolltotop);

  }
}
</script>

<style scoped lang='scss'>
.newHouse{
  //.newHousePurse{
  //  padding: 0 360px;
  //  box-sizing: border-box;
  //  // height:400px;
  //  // border:1px solid red;
  //  .location{
  //    font-size: 14px;
  //    letter-spacing: 1px;
  //    font-family: Source Han Sans CN;
  //    font-weight: 400;
  //    line-height: 24px;
  //    color: #9C9C9C;
  //    text-align: left;
  //    margin:18px 0;
  //  }
  //}
    .top{
      position: fixed;
      right: 50px;
      top: 50%;
    }
   .naver{
     padding: 0 190px;
     width: 100%;
     box-sizing: border-box;
     display: flex;
     justify-content: space-around;

     .naverbox{
       width: 225px;
       height: 100px;
       display: flex;
       justify-content: space-between;
       background: #FFFFFF;
       box-shadow: 2px 2px 21px 0px rgba(0, 0, 0, 0.1);
       border-radius: 10px;
       position: relative;
       padding: 20px;
       &:hover{
         //width: 800px;
         .navleft{
           .tit{
             font-size: 16px;
             font-family: Source Han Sans CN;
             font-weight: bold;
             color: #C0A069;
             line-height:50px;
             //text-shadow: 0px 9px 28px rgba(195, 164, 110, 0.23);
             //background: linear-gradient(0deg, #C0A069 0%, #E9D5AC 100%);
           }
           .tit2{
             opacity: 1
           }
         }
       }
       .navleft{
         text-align: left;
        .tit{
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #C0A069;
          line-height: 100px;
          transition: all 0.2s linear;
          //text-shadow: 0px 9px 28px rgba(195, 164, 110, 0.23);
          //background: linear-gradient(0deg, #C0A069 0%, #E9D5AC 100%);
        }
         .tit2{
          opacity: 0;
           transition: all 0.2s linear;
         }
         .TIT{
           display: none;
         }
       }
       .navright{

         position: absolute;
         right: -30px;
         top: 5px;
         .rightpng{
           width: 140px;
           height: 140px;

         }
       }
     }
   }
   .modelone{
     padding: 0 190px;
     margin-bottom: 40px;
     position: relative;
     .modelonetit{
       height: 40px;
       font-size: 28px;
       font-family: Source Han Sans CN;
       font-weight: bold;
       color: #141414;
       line-height: 40px;
       text-align: left;
       margin-left: 10px;
       display: flex;
       justify-content: space-between;
       margin: 45px 0;
       &:hover{
         .txtwo{
           font-size: 16px;
           font-family: Source Han Sans CN;
           font-weight: 400;
           color: #F22525;
           margin-right: 40px;
           cursor:pointer;
           border-bottom: 1px solid #F22525;
         }

       }
       .txtwo{
         font-size: 16px;
         font-family: Source Han Sans CN;
         font-weight: 400;
         color: #F22525;
         margin-right: 40px;
         cursor:pointer

       }
     }
     .modelones{
       width: 100%;
       box-sizing: border-box;
       display: flex;
       justify-content: space-around;
       .house{
         position: relative;
         width: 350px;
         height: 260px;
         border-radius: 5px;
         overflow: hidden;
         margin-right: 10px;

         .houseimg{
           position: absolute;
           left: 0;
           top: 0;
           background-size: cover;
           z-index: -1;
           width: 100%;
           height: 260px;
           transition: all .2s linear;
         }
         &:hover{
           .houseimg{
             -webkit-transform:scale(1.2);
             -moz-transform:scale(1.2);
             -o-transform:scale(1.2);
           }
         }
         .mask{
           position: absolute;
           left: 0;
           top: 0;
           z-index: 1;
           background: #000000;
           opacity: 0.4;
           width: 100%;
           height: 100%;
         }
         .onetit{
           height: 50px;
           font-size: 24px;
           font-family: Source Han Sans CN;
           font-weight: bold;
           color: #FFFFFF;
           line-height: 50px;
           position: relative;
           z-index: 2;
           margin-top: 50px;
         }
         .twotit{
           position: relative;
           z-index: 2;
           width: 199px;
           height: 34px;
           line-height: 34px;
           text-align: center;
           border: 1px solid #FFFFFF;
           margin: 0 auto;
           span{
             color: #FFFFFF;
             font-size: 14px;
             font-family: Source Han Sans CN;
             font-weight: 400;
             margin: 0 3px;
           }
         }
         .bottom{
           padding: 0 10px;
           display: flex;
           justify-content: space-between;
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           background: #141414;
           opacity: 0.75;
           z-index: 2;
           color: #FFFFFF;
           box-sizing: border-box;
           height:58px;
           font-size: 13px;
           line-height: 58px;
           border-radius: 0px 0px 5px 5px;
           .bottom_left{
             span{
               color: #FFFFFF;
             }
           }
           .bottom_right{
             color: #FFFFFF;
           }
         }
      }
     }
   }
   .modeltwo{
    padding: 0 190px;
     height: 524px;
     background: #F6F6F6;
     .modelonetit{
      height: 120px;
      font-size: 28px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #141414;
      line-height: 120px;
      text-align: left;
      margin-left: 10px;
       display: flex;
       justify-content: space-between;
       .txtwo{
         font-size: 16px;
         font-family: Source Han Sans CN;
         font-weight: 400;
         color: #F22525;
         margin-right: 40px;
         cursor:pointer
       }
    }
    .modelones{
      width: 100%;
      box-sizing: border-box;
      display: flex;
      //justify-content: space-around;
      justify-content: flex-start;
      .house{
        position: relative;
        width: 272px;
        height: 277px;
        border-radius: 5px;
        text-align: left;
        margin-right: 20px;
        .houseimg{
          width: 272px;
          height: 204px;
        }
        .onetit{
          height: 40px;
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #141414;
          line-height: 40px;

        }
        .twotit{
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #666666;
          height: 30px;
          line-height: 30px;
        }
        .bottom{
          display: flex;
          justify-content: space-between;
          width: 100%;
          color: #141414;
          //color: #FFFFFF;
          box-sizing: border-box;
          height:35px;
          line-height: 35px;
          border-radius: 0px 0px 5px 5px;
          .bottom_left{
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #666666;
          }
          .bottom_right{
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F22525;
            font-size: 12px;
            .num{
              font-size: 16px;
              color: #F22525;
            }
          }
        }
      }
    }
  }
   .modelthree{
    padding: 0 190px;
     clear: both;
     overflow: hidden;
     margin-bottom: 60px;
    .modelonetit{
      height: 40px;
      font-size: 28px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #141414;
      line-height: 40px;
      text-align: left;
      margin-left: 10px;
      margin: 45px 0;
      display: flex;
      justify-content: space-between;
      &:hover{
        .txtwo{
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #F22525;
          margin-right: 40px;
          cursor:pointer;
          border-bottom: 1px solid #F22525;
        }

      }
      .txtwo{
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #F22525;
        margin-right: 40px;
        cursor:pointer
      }
    }
    .modelones{
      width: 100%;
      box-sizing: border-box;

      .house{
        float: left;
        margin: 0 15px 10px 0;
        width: 490px;
        height: 138px;
        background: #FFFFFF;
        box-shadow: 2px 2px 21px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        display: flex;
        justify-content: flex-start;
        padding: 30px 20px;
        .left{
          height: 178px;

          .houseimg{
            width: 103px;
            height: 130px;
            vertical-align: middle;
          }
        }
        .right{
          text-align: left;
          margin-left: 20px;
          width: 80%;
          .onetit{
            height: 20px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            line-height: 20px;

          }
          .twotit2{
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #666666;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;

          }
        }

      }
    }
  }
}
</style>
